<template>
	<div v-show="isShow">
		<view
			class="wrap-appointmentTime-pop"
			@touchmove.stop.prevent
			@click.stop.prevent
			@click="onDismiss"
		>
			<view class="appointmentTime-white safe-area" @click.stop.prevent>
				<scroll-view class="appointmentTime-tab" scroll-x>
					<block v-for="(item, index) in tab_list" :key="index">
						<view
							class="tab-item f-32"
							:class="{ active: item.select }"
							@click="onTab(index)"
						>
							{{ item.title }} {{ item.week }}

							<view v-if="item.select" class="line"></view>
						</view>
					</block>
				</scroll-view>

				<scroll-view class="time-list flex" scroll-y>
					<block v-for="(item, index) in time_list" :key="index">
						<view class="time-item" @click="onItem(index, item)">
							<view
								class="flex column align-center just-center f-24"
								:class="{
									select: item.select,
									'no-use': item.type === 0,
								}"
							>
								<text>
									{{ item.time }}
								</text>

								<text class="status">
									{{
										item.type === 0 ? "不可预约" : "可预约"
									}}
								</text>
							</view>
						</view>
					</block>
				</scroll-view>
			</view>
		</view>
	</div>
</template>

<script>
	import { getTimeList } from "@/API/technician.js";
	export default {
		props: {
			/**
			 * 技师ID
			 */
			technicianID: {
				type: String,
				default: "",
			},
			/**
			 * 服务ID
			 */
			serviceID: {
				type: String,
				default: "",
			},
			/**
			 * 是否显示
			 */
			isShow: {
				type: Boolean,
				default: false,
			},
			// 购买数量
			num: Number
		},
		watch: {
			num:{
				handler(newVal, oldVal) {
					if (newVal) {
						this.getData();
					}
				}
			}	
		},
		data() {
			return {
				tab_list: [],
				current_date: "",
				current_week: "",

				time_list: [],
			};
		},
		mounted() {
			this.tab_list = this.$filters.getCurrentDateWeekAndAfter();
			this.onTab(0);
		},
		methods: {
			/**
			 * 关闭弹窗
			 */
			onDismiss() {
				this.$emit("update:isShow", false);
			},
			/**
			 * 选择tab
			 */
			onTab(index) {
				this.tab_list.forEach((item, i) => {
					item.select = i === index;
				});
				this.current_date = this.tab_list[index].total;
				this.current_week = this.tab_list[index].week;
				this.getData();
			},
			/**
			 * 选择时间
			 */
			onItem(index, item) {
				if (item.type === 0) {
					this.$st.show("不可预约");
					return;
				}
				this.time_list.forEach((item, i) => {
					item.select = i === index;
				});
				this.$emit("selectTime", {
					time: this.current_date + " " + item.time,
					total:
						this.current_date +
						" " +
						this.current_week +
						" " +
						item.time,
				});
				setTimeout(() => {
					this.onDismiss();
				}, 300);
			},

			/**
			 * 获取信息
			 */
			getData() {
				getTimeList({
					technician_id: this.technicianID,
					service_id: this.serviceID,
					subscribe_time: this.current_date,
					num: this.num
				}).then((res) => {
					for (let i = 0; i < res.data.length; i++) {
						res.data[i]["select"] = false;
					}
					this.time_list = res.data;
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	.wrap-appointmentTime-pop {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 100;
		background-color: rgba(0, 0, 0, 0.5);

		.appointmentTime-white {
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			background-color: white;
			z-index: 101;
			padding-top: 10rpx;
			border-radius: 20rpx 20rpx 0 0;

			.appointmentTime-tab {
				width: 100%;
				height: 100rpx;
				white-space: nowrap;

				.tab-item {
					display: inline-block;
					height: 100rpx;
					padding: 0 20rpx;
					line-height: 100rpx;
					text-align: center;
					color: $title-color;
					position: relative;
					z-index: 102;

					.line {
						position: absolute;
						left: 50%;
						transform: translateX(-50%);
						bottom: 0;
						width: 80rpx;
						height: 8rpx;
						border-radius: 4rpx;
						background-color: $theme-color;
					}
				}
			}

			.time-list {
				margin-top: 20rpx;
				width: 100%;
				overflow: hidden;
				max-height: 800rpx;
				flex-wrap: wrap;

				.time-item {
					width: 158rpx;
					height: 108rpx;
					margin-bottom: 26rpx;
					margin-left: 20rpx;
					border-radius: 10rpx;
					overflow: hidden;
					box-sizing: border-box;
					border: 2rpx solid #e5e5e5;
					color: $title-color;
					display: inline-block;

					> view {
						width: 100%;
						height: 100%;

						.status {
							margin-top: 10rpx;
						}
					}
				}

				.no-use {
					background-color: #e5e5e5;
					color: #c5c5c5;
					border: none !important;
				}
				.select {
					background: $theme-color;
					color: $bg-text-color;
					border: none !important;
				}
			}
		}
	}
</style>
